<template>
  <div class="approval-page">
    <!-- 左侧信息列 -->
    <div class="left-column">
      <!-- 基本信息卡片 -->
      <el-card class="info-card" shadow="hover">
        <h3 class="card-title">基本信息</h3>
        <ul class="info-list">
          <!-- 基本信息 -->
          <li>
            <span class="label">单据编号</span>
            <span class="value">{{ info.contractNo }}</span>
          </li>
          <li>
            <span class="label">老人姓名</span>
            <span class="value">{{ info.name }}</span>
          </li>
          <li>
            <span class="label">老人身份证号</span>
            <span class="value">{{ info.idCardNo }}</span>
          </li>
          <li>
            <span class="label">联系方式</span>
            <span class="value">{{ info.contact }}</span>
          </li>
          <li>
            <span class="label">费用期限</span>
            <span class="value">{{ info.stayStart.slice(0,10) }} —— {{ info.stayEnd.slice(0,10) }}</span>
          </li>
          <li>
            <span class="label">护理等级</span>
            <span class="value">{{ info.careLevel }}</span>
          </li>
          <li>
            <span class="label">入住床位</span>
            <span class="value">{{ info.bedNo }}床位</span>
          </li>
          <li>
            <span class="label">签约合同</span>
            <span class="value">
    {{ info.name }}的入住合同 <a :href="info.contractUrl" class="view-link">查看</a>
  </span>
          </li>
          <li>
            <span class="label">养老顾问</span>
            <span class="value">{{ info.consultant }}</span>
          </li>
          <li>
            <span class="label">护理员</span>
            <span class="value">{{ info.caregiverName }}</span>
          </li>

          <!-- 申请信息 -->
<!--          <li>-->
<!--            <span class="label">退住日期</span>-->
<!--            <span class="value">{{ info.checkoutTime }}</span>-->
<!--          </li>-->
<!--          <li>-->
<!--            <span class="label">退住原因</span>-->
<!--            <span class="value">{{ info.checkoutReason }}</span>-->
<!--          </li>-->
<!--          <li>-->
<!--            <span class="label">备注</span>-->
<!--            <span class="value">{{ info.remark }}</span>-->
<!--          </li>-->
<!--          <li>-->
<!--            <span class="label">申请人</span>-->
<!--            <span class="value">{{ info.applicant }}</span>-->
<!--          </li>-->
<!--          <li>-->
<!--            <span class="label">申请时间</span>-->
<!--            <span class="value">{{ formatDateStr( info.applyTime) }}</span>-->
<!--          </li>-->
        </ul>
      </el-card>

      <!-- 申请信息卡片 -->
      <el-card class="info-card" shadow="hover" style="margin-top: 20px;">
        <h3 class="card-title">申请信息</h3>
        <ul class="info-list">
          <li>
            <span class="label">退住日期</span>
            <span class="value">{{ info.checkoutTime }}</span>
          </li>
          <li>
            <span class="label">退住原因</span>
            <span class="value">{{ info.checkoutReason }}</span>
          </li>
          <li>
            <span class="label">备注</span>
            <span class="value">{{ info.remark }}</span>
          </li>
          <li>
            <span class="label">申请人</span>
            <span class="value">{{ info.applicant }}</span>
          </li>
          <li>
            <span class="label">申请时间</span>
            <span class="value">{{ formatDateStr( info.applyTime) }}</span>
          </li>
        </ul>
      </el-card>

    </div>

    <!-- 右侧审批列 -->
    <div class="right-column">
      <!-- 审批结果卡片 -->
      <el-card v-if="isTi" class="approval-card" shadow="hover">
        <h3 class="card-title">审批结果</h3>
        <el-form :model="approvalForm" :rules="approvalRules" ref="approvalForm">
          <el-form-item label="审批结果" prop="result">
            <el-radio-group v-model="approvalForm.result">
              <el-radio :label="0">审批通过</el-radio>
              <el-radio :label="1">审批拒绝</el-radio>
              <el-radio :label="2">驳回</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="*审批意见" prop="opinion">
            <el-input
                v-model="approvalForm.opinion"
                type="textarea"
                placeholder="请输入"
                :maxlength="200"
                show-word-limit
                rows="3"
            />
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 操作记录卡片 -->
      <el-card v-if="log.activities" class="record-card" shadow="hover" style="margin-top: 20px;">
        <h3 class="card-title">操作记录</h3>
        <ul v-if="users.appUser" class="record-list">
          <li v-for="item in log.activities" class="record-item">
            <div class="item-icon">
              <!-- 替换为“发起申请”图标 -->
              <img src="@/assets/images/avatar.jpg" alt="发起申请" />
            </div>
            <div class="item-content">
              <div class="item-desc">({{ log[item.assignee]?.remark }}){{item.name}}</div>
              <div class="item-status"> {{ log[item.assignee]?.nickName }}({{item.endTime ? "已处理":"正在处理"}})</div>
              <div v-if="log[item.id] " class="approval-opinion">{{log[item.id].fullMessage ? log[item.id].fullMessage :"无"}}</div>
            </div>
            <div class="item-time">{{item.endTime ? formatDateStr(item.endTime):""}}</div>
          </li>

        </ul>
      </el-card>
    </div>

    <!-- 底部按钮 -->
    <div class="btn-area">
      <el-button type="default" @click="goBack">返回</el-button>
      <el-button v-if="isTi" type="primary" @click="submitApproval">提交</el-button>
    </div>
  </div>
</template>

<script>
import {approval, getActivityLog, getActivityUser, getCheckout} from "@/api/check/checkout.js";
import {updateCheckout} from "@/api/check/checkout.js"
export default {
  name: "ApprovalPage",
  data() {
    return {
      users:{},
      isTi: true,
      log:{},
      info: {
        id: "",                 // 主键（新增时可为空）
        checkoutNo: "",         // 退住编号
        title: "",              // 标题
        elderId: "",            // 老人ID
        businessId: "",         // 业务ID（流程实例ID，可为空）
        name: "",               // 姓名
        idCardNo: "",           // 身份证号
        contact: "",            // 联系方式
        stayStart: "",          // 入住开始时间（如 "2024-05-01"）
        stayEnd: "",            // 入住结束时间（如 "2025-10-01"）
        careLevel: "",          // 护理等级（如 "一级护理"）
        bedNo: "",              // 入住床位号
        contractUrl: "",        // 签约合同URL
        contractNo: "",         // 合同编号
        consultant: "",         // 养老顾问
        caregiverName: "",      // 护理员名称
        checkoutTime: "",       // 退住时间（如 "2025-10-15"）
        checkoutReason: "",     // 退住原因
        applicant: "",          // 申请人姓名
        applicantId: "",        // 申请人ID
        applicantDept: "",      // 申请人部门编号
        applyTime: "",          // 申请时间（如 "2025-10-15T10:30:00"）
        createdAt: "",          // 创建时间（自动生成可为空）
        updatedAt: "",
        processStatus: ''// 更新时间（自动生成可为空）
      },
      approvalForm: {
        result: "", // 绑定审批结果（approved/rejected/reject）
        opinion: ""  // 绑定审批意见
      },
      approvalRules: {
        result: [{ required: true, message: "请选择审批结果", trigger: "change" }],
        opinion: [{ required: true, message: "请输入审批意见", trigger: "blur" }]
      }
    };
  },
  methods: {
    goBack() {
      this.$router.push("/CollaborationWork/tasking");// 路由回退
    },
    submitApproval() {

      this.$refs.approvalForm.validate(valid => {
        if (valid) {
          const params = {
            checkoutId: this.info.id,
            num: this.approvalForm.result,
            comment: this.approvalForm.opinion
          };
          approval(params).then(response => {
            getActivityLog(this.id).then(response => {
              this.log = response.data
              this.log.activities=response.data.activities.reverse()
            })
            this.isTi = false;
            this.$message.success("提交成功");
          //  this.$emit("next");



          })
        } else {
          this.$message.error("请填写必填项");
          return false;
        }
      });

    },

    formatDateStr(dateStr) {
      // 1. 基础校验：判断是否为有效字符串且包含关键符号
      if (!dateStr || typeof dateStr !== 'string' || !dateStr.includes('T')) {
        console.warn('输入不是有效的日期格式（需包含"T"，如2025-10-23T10:42:42.000+08:00）');
        return '';
      }

      // 2. 截取核心部分：年月日（T之前） + 时分秒（T之后、.之前）
      // 例："2025-10-23T10:42:42.000+08:00" → 拆分为 ["2025-10-23", "10:42:42.000+08:00"]
      const datePart = dateStr.split('T')[0]; // 取"T"前的年月日："2025-10-23"
      const timePart = dateStr.split('T')[1].split('.')[0]; // 取"T"后、"."前的时分秒："10:42:42"

      // 3. 重组为 "年月日 时分秒" 格式
      return `${datePart} ${timePart}`;
    },


  },
  mounted() {
    // 获取当前页面的参数
    // const query = this.$route.query;
    getCheckout(this.id).then(res => {
      this.info = res.data
      console.log(res);
    })
    getActivityUser(this.id).then(response => {
      this.users = response.data
    })
    getActivityLog(this.id).then(response => {
      this.log = response.data
      this.log.activities=response.data.activities.reverse()
    })


  },
  props:{
    id: {
      type: [Number,String],
      default: null
    }
  }
};
</script>

<style scoped>
.approval-page {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
}

.left-column {
  width: 60%;
}

.right-column {
  width: 38%;
}

.info-card,
.approval-card,
.record-card {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 20px;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}

.info-list {
  list-style: none;
  padding: 0;
}

/* 标签右对齐样式 */
.info-list li {
  display: flex;
  margin-bottom: 15px;
}

.info-list .label {
  width: 120px;
  text-align: right;
  margin-right: 15px;
  color: #606266;
}

.info-list .value {
  flex: 1;
}

.view-link {
  color: #409eff;
  text-decoration: none;
  margin-left: 5px;
}

/* 操作记录核心样式（流程线 + 布局） */
.record-list {
  list-style: none;
  padding: 0;
  position: relative; /* 作为伪元素的定位容器 */
}

.record-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;

}

/* 垂直主线：连接所有记录项（除第一个） */
.record-item:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 20px; /* 与40px宽图标中心对齐（40/2=20） */
  top: 41px;
  height: 30px;
  width: 2px;
  background-color: #dcdcdc; /* 浅灰色流程线 */
}

.item-icon {
  margin-right: 12px;
}

.item-icon img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.item-content {
  flex: 1;
}

.item-desc {
  font-weight: 500;
}

.item-status {
  color: #909399;
  font-size: 12px;
}

.item-time {
  color: #909399;
  font-size: 12px;
  white-space: nowrap; /* 防止时间换行 */
}

/* 底部按钮 */
.btn-area {
  margin-top: 40px;
  text-align: center;
  width: 100%;
}

.btn-area   button{
  margin: 0 10px;


}
</style>